<template>
<modal-container v-el:modal title="编辑" class="edit-modal" theme="">
	<form v-el:submitform>
		<div>
			<table class="table table-hover">
				<tbody>
					<tr>

						<td><span class="required">*</span>商户名称</td>
						<td>
							<input type="text" class="form-control" :value="model.mchtName" disabled name="mchtName" :required="true">
						</td>
					</tr>
					<tr>
						<td><span class="required">*</span>角色号</td>
						<td>
							<input type="text" class="form-control" :value="model.roleId" disabled name="roleId">
						</td>
					</tr>
					<tr>
						<td><span class="required">*</span>角色名称</td>
						<td>
							<input type="text" class="form-control" :value="model.roleName" name="roleName" maxlength="32">
						</td>
					</tr>
					<tr>
						<td><span class="required">*</span>角色类型</td>
						<td>
                    <select name="roleTpe" class="form-control" id="select" v-model="roleTypeValue" :value.sync="model.roleType">
							<option v-for="option in roleOptions" :value="option.value">{{option.key}}</option>
					</select>
						</td>
					</tr>
					<tr>
						<td><span class="required">&nbsp;</span>描述</td>
						<td>
							<input type="text" class="form-control" name="roleDsc" maxlength="64" :value="model.roleDsc">
						</td>
					</tr>
					<tr>
						<td><span class="required">*</span>配置角色权限</td>
						<td>
							<input class="form-control" style="visibility:hidden">
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="alert alert-default" id="scroll">
			<div class="treeview list-group">
				<ol class="list-group-item">
					<tree-item v-ref:tree :tree="tree"></tree-item>
				</ol>
			</div>
		</div>
		<div class="modal-footer">
			<v-button type="submit" theme="primary" class="pull-right">确认</v-button>
			<v-button @click="hide" style="margin-right:10px">取消</v-button>
		</div>
	</form>
</modal-container>
</template>

<style lang="css" scoped>
	#scroll {
    overflow-x: hidden;
    overflow-y: auto!important;
		max-height: 220px;
	}
	.treeview input[type="checkbox"] {
		width: 12px;
		margin-right: 6px;
	}

	.treeview .list-group-item {
		padding: 10px 15px;
	}
	.treeview {
		margin-bottom: 0;
	}
</style>

<script>
import Item from './item.vue';
import {
	sketch
} from 'lib/permission.js'

var serialize = require('form-serialize');

export default {
	components: {
		'tree-item': Item
	},
	props: {
		model: {
			type: Object,
			default: {}
		}
	},
	data: () => ({
		roleTypeValue: "",
		tree: [],
		map: [],
		collection: {
			mchtList: []
		},
		roleOptions:[]

	}),
	computed:{
		roleOptions(){
			if(this.model.mchtId == "10000000"){
				return [
					{key:"系统操作员",value:"system"}
				]
			}else{
				return [
					{key:"商户管理员",value:"mchtmanager"},
					{key:"商户操作员",value:"mchtopr"}
				]
			}
		}

	},
	methods: {
		init() {
			let self = this;
			$(this.$els.modal).modal("show");
		},
		hide() {
			$(this.$els.modal).modal("hide");
		},
		reload() {
			this.$dispatch("table-reload");
		},
		_mchtselected(mchtId) {
			return (mchtId == this.model.brhNo);
		},
		async getRoleList() {
			let self = this;
			var result = await this.$http({
				url: httpProject +'/api/v1' + projectName_Url + '/roleList/add/'+ this.roleTypeValue + '/' +this.model.mchtId,
				method: 'GET'
			})
				let json = result.body.content;
				let data = sketch(json.info)
				let tree = self.assign(data);
				self.$refs.tree.$set("tree", tree);
				self.$nextTick(() => {
					if(window.tree){
						$(".tree").children().remove()
					}
						this.$refs.tree.init();
				})

		},
		assign(json) {
			let self = this;
			let cake = json.map((player, index) => {
				let text = player.key;
				let value = player.value;
				if (player.hasOwnProperty("child")) {
					let children = self.assign(player.child);
					return {
						children,
						text,
						value
					}
				} else {
					return {
						text,
						value
					}
				}
			});
			return cake;
		},
		async roleModel() {
			let self = this;
			var response = await self.$post({
				url: '/api/v1' + projectName_Url + '/list/role/' + this.model.roleId + "?mchtId="+this.model.mchtId,
				method:"GET"
			})
				let data = response.content.info;
				let mapArray = _.map(data, function(num){
					return num.value
				});
				//SET CHECKBOX
				this.$refs.tree.set(mapArray)
				//this.$set("map",mapArray);
		},
		submit(data) {
            let arr = this.$refs.tree.get();
            if (arr.length == 0) {
                let data = {
                    title: "操作提示",
                    content: "必须分配角色权限"
                }
                Midway.alert(data);
                return false;
            }
			let self = this;
			data.oldbrhId = this.model.brhNo;
			data.roleId = this.model.roleId,
			data.mchtId =  this.model.mchtId,
			self.$post({
				url: "/api/v1" + projectName_Url + "/plat/role/"+ data.roleId,
				data:data,
				method:"PUT"
			}).then(response => {
				let data = {
					title: "操作提示",
					content: "操作成功"
				}
				Midway.alert(data);
				self.hide();
				self.reload();
			}, response => {

			});
		}
	},
	watch: {
		'model': async function(data){
			await this.getRoleList();
			await this.roleModel()
		},
		async roleTypeValue(data){
			await this.getRoleList();
			await this.roleModel()
		}
	},
	beforeCompile() {
		// this.getRoleList();
	},
	ready() {
		let self = this;

		$(this.$els.modal).on('hidden.bs.modal', () => {
			this.$refs.tree.deselect();
		});

		$(this.$els.submitform).submit(function() {
			return false;
		});
		$(self.$els.submitform).validate({
			submitHandler() {
				let form = this.currentForm;

				$(form).find("input").each(function() {
					$(this).val($.trim($(this).val()));
				});

				let _data = serialize(form, {
					hash: true,
					disabled: true,
					empty: true
				});

				let arr = self.$refs.tree.get();
				_data.roleList = arr.join(",");
				//delete _data.key;
				self.submit(_data);
			},
			rules: {
			    roleId:{
                    required: true,
				},
				roleName: {
					required: true,
					maxlength: 12
				},
				roleDsc: {
					maxlength:30
				},
				key: {
					required: true
				}
			},
			messages: {
				roleName: {
					required: "角色名称不能为空",
					maxlength: "角色名不超过12位"
				},
				dsc: {
					maxlength: "角色描述不超过30位"
				},
				key: {
					required: "&nbsp;&nbsp;&nbsp;必须分配角色权限"
				}
			},
		});
	}
}
</script>
